import React, { useState } from 'react';
import { Select } from 'antd';
import { useFetchDataEffect } from '@/utils/curd';
import { getRoleList } from '@/pages/auth-manage/project-manage/service';

type Props = {
  zoneId: string;
  value?: any;
  placeholder?: string;
  onChange?: (data: any) => void;
  isMultiple?: boolean;
};

const SelectRole: React.FC<Props> = ({ value, placeholder, onChange, zoneId, isMultiple }) => {
  const [list, setList] = useState<any[]>([]);

  useFetchDataEffect(
    {
      fetcher: async () => {
        if (zoneId) {
          const { data } = await getRoleList({ id: zoneId, name: '', parentId: '' });
          return data;
        }
        return [];
      },
      updater: setList,
    },
    [zoneId],
  );

  return (
    <Select
      value={value}
      placeholder={placeholder ?? '请选择角色'}
      mode={isMultiple ? 'multiple' : undefined}
      allowClear
      showSearch
      onChange={onChange}
    >
      {list.map((item) => {
        return (
          <Select.Option key={item.id} value={item.id}>
            <span>{item.roleName}</span>
          </Select.Option>
        );
      })}
    </Select>
  );
};

export default SelectRole;
